<template>
	<div id="orders">
		<div class="home_div">
			我的订单
		</div>
		<div class="oders_div">
			<div class="order_div">
				<span>沃尔玛</span>
				<span>已取消</span>
			</div>

			<div class="imgorder_div">
				<div class="imgOrder">
					<img src="../../assets/orders/icon_order.png" />
					<img src="../../assets/orders/juzi.png" />
					<img src="../../assets/orders/tizi.png" />
					<img src="../../assets/orders/caomei.png" />
				</div>
				<div class="price_div">
					<div class="price_span">￥66.69</div>
					<div class="sl_span">共6件</div>
				</div>
			</div>
		</div>

		<div class="oders_div">
			<div class="order_div">
				<span>沃尔玛</span>
				<span>已取消</span>
			</div>

			<div class="imgorder_div">
				<div class="imgOrder">
					<img src="../../assets/orders/li.png" />
					<img src="../../assets/orders/apple.png" />
				</div>
				<div class="price_div">
					<div class="price_span">￥36.88</div>
					<div class="sl_span">共2件</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

</script>

<style scoped>
	#orders {
		margin: 0;
		padding: 0;
		height: 100%;
		position: fixed;
		width: 100%;
		background: #f8f8f8;
	}

	.home_div {
		height: 44px;
		text-align: center;
		font-size: 16px;
		padding-top: 11px;
		background: #FFFFFF;
	}

	.oders_div {
		height: 110px;
		margin-left: 18px;
		margin-right: 18px;
		margin-top: 16px;
		background: #FFFFFF;
	}

	.order_div {
		height: 38px;
	}

	.order_div :nth-child(1) {
		font-size: 16px;
		float: left;
		margin-top: 16px;
		margin-left: 16px;
	}

	.order_div :nth-child(2) {
		font-size: 14px;
		color: #999999;
		float: right;
		margin-top: 16px;
		margin-right: 16px;
	}

	.imgorder_div {
		margin-top: 16px;
		display: flex;
	}

	.imgorder_div img {
		height: 40px;
		width: 40px;
		margin-right: 12px;
	}

	.imgOrder {
		width: 80%;
		margin-left: 16px;
	}


	.price_div {
		margin-right: 16px;
		width: 106px;
	}


	.price_span {
		text-align: right;
		font-size: 14px;
		color: #E93B3B;
		padding: 0px;
	}

	.sl_span {
		text-align: right;
		font-size: 12px;
		color: #333333;
		padding-left: 16px;
		padding-top: 4px;
	}
</style>
